<template>
  <div class="post" @click="handleClick">
    <p class="post-title">{{ post.jtzw }}</p>
    <template v-if="type == 'latest'">
      <div class="post-info">
        <p class="post-info_left">
          <span> {{ zpnum }} </span> | <span>{{ edus }}</span> |
          <span>{{ gznum }}</span>
        </p>
        <p class="post-info_right">{{ post.salaryType }}</p>
      </div>
      <p class="post-bottom">{{ post.cname_all }}</p>
    </template>
    <template v-if="type == 'hot'">
      <div class="post-info">
        <p class="post-info_left">
          <span> {{ zpnum }} </span> | <span>{{ edus }}</span> |
          <span>{{ gznum }}</span>
        </p>
        <p class="post-info_right">{{ post.salaryType }}</p>
      </div>
      <p class="post-bottom">{{ post.cname_all }}</p>
    </template>
    <template v-if="type == 'ai'">
      <div class="post-info">
        <p class="post-info_left">
          <span> {{ zpnum }} </span> | <span>{{ edus }}</span> |
          <span>{{ gznum }}</span>
        </p>
        <p class="post-info_right">{{ post.salaryType }}</p>
      </div>
      <p class="post-bottom">{{ post.cname_all }}</p>
    </template>
    <template v-if="type == 'favorite'">
      <div class="post-info">
        <p class="post-info_left">
          <span> {{ zpnum }} </span> | <span>{{ edus }}</span> |
          <span>{{ gznum }}</span>
        </p>
        <p class="post-info_right">{{ post.salaryType }}</p>
      </div>
      <p class="post-bottom">{{ post.cname_all }}</p>
    </template>
    <template v-if="type == 'zp'">
      <div class="post-info">
        <p class="post-info_left">
          <span>{{ post.cname_all }}</span>
        </p>
        <p class="post-info_right">{{ post.salaryType }}</p>
      </div>
      <p class="post-bottom">{{ updatetime }} | {{ post.region_name }}</p>
    </template>
  </div>
</template>

<script setup>
import { computed } from "@vue/reactivity";

const props = defineProps({
  type: {
    type: String,
    default: "latest",
  },
  post: {
    type: Object,
    default: () => {
      return {
        id: "",
        jtzw: "",
        zpNum: 0,
        edus: "",
        gznum: "",
        salaryType: "",
        cname_all: "",
        updatetime: "",
      };
    },
  },
});

const zpnum = computed(() => {
  let num = props.post.zpnum;
  if(num == '人数不限' || num == '不限' || num == 0) return '人数不限';
  else return `招${num}人`
})

const edus = computed(()=> {
  return props.post.edus == '不限'? '学历不限': props.post.edus
})

const gznum = computed(()=> {
  return props.post.gznum == '不限'? '经验不限': props.post.gznum
})

const updatetime = computed(()=> {
  return props.post.updatetime && props.post.updatetime.slice(0, 10)
})

const handleClick = () => {
  let url =
    "http://m.gzrc.com.cn/jobdetail_" +
    props.post.id +
    ".htm?from_url=ex-serviceman";
  window.open(url, "_blank");
};

</script>

<style lang="scss" scoped>
.post {
  margin: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid #ededf1;
  font-size: 12px;
  &-title {
    @include textoverflow;
    margin-bottom: 4px;
    font-weight: bold;
  }
  &-info {
    display: flex;
    justify-content: space-between;
    color: #999999;
    &_right {
      font-size: 14px;
      color: $baseColor;
    }
  }
  &-bottom {
    @include textoverflow;
    color: #999999;
  }
}
</style>